<template>
	<view class="myservice">
		<!-- 顶部导航 -->
		<diyNavBar value='我的客服'></diyNavBar>
		<view class="top" v-if="code[0]">
			<image :src="$util.img(code[0].value)" mode="widthFix" @click="saveImage"></image>
			<text class="tips">点击保存图片</text>
			<text class="title">联系官方客服</text>
		</view>
		<view class="item" v-if="getdata && getdata[1]" @click="tzqq">
			<text class="title" v-if="getdata[1].title">客服{{getdata[1].title}}</text>
			<view  class="name">
				<view class="name-ingo" v-if="getdata[1].value">{{getdata[1].value}}</view>
				<!-- <text class="iconfont icon-qianwang"></text> -->
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyNavBar,
			loadingCover
		},
		data() {
			return {
				getdata: [],
				code: {}
			}
		},
		onShow() {
			this.$http.sendrequest('/member/Customer', {}, {
				tokenJudge: true
			}).then(res => {
				if (res.code == 1) {
					let data = JSON.parse(JSON.stringify(res.data))
					this.code = data.splice(2, 1);
					this.getdata = data;
					console.log(this.getdata)
					this.$refs.loadingCover.hide();
				}
			})
		},
		methods: {
			saveImage() {
				// #ifdef H5
				this.$util.getImglocal(this.$util.img(this.code[0].value))
				// #endif
				// #ifdef APP
				let that = this;
				uni.showModal({
					content: '是否保存图片到相册',
					success: (res) => {
						uni.hideLoading();
						if (res.confirm) {
							// 向用户发起授权请求
							that.downLoadImg();
						}
					}
				});
				// #endif
			},
			/**
			 * 下载资源，保存图片到系统相册
			 */
			downLoadImg() {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: this.$util.img(this.code[0].value),
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			/*
			 * 引导用户开启权限
			 */
			isAuth() {
				uni.showModal({
					content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									console.log(result.authSetting);
								}
							});
						}
					}
				});
			},
			/**
			 * 跳转qq
			 */
			tzqq(){
				// #ifdef H5
				window.location.href = this.getdata[2].value;
				// #endif
				// #ifdef APP
				plus.runtime.openURL(this.getdata[2].value);
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myservice {
		min-height: 100vh;
		background: $uni-content-background-color;
		font-family: Arial;
		.top {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 294rpx;
				height: 294rpx;
				margin-top: 76rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx 0 72rpx;
			}
			.tips{
				font-size: 24rpx;
				color: rgba(0,0,0,.2);
				margin-top: 20rpx;
			}
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-regular;
			background: #FFFFFF;
			height: 90rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid rgba(0, 0, 0, .02);

			.title {
				font-weight: bold;
			}

			.name {
				color: #515151;
				width: 60%;
				display: flex;
				align-items: center;
				.name-ingo{
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap;  // 默认不换行；
					width: 90%;
					text-align: right;
				}
				.iconfont{
					margin-left: 20rpx;
					font-size: 28rpx;
					transform: translateY(2rpx);
					font-weight: bold;
				}
			}
		}
	}
</style>